<template>
  <div class="page">
    <m-header :title="MyRobot.robot_detail" :canback="Boolean(1)"></m-header>
    <div class="body">
      <ul class="wrap">
        <li class="list">
          <div class="list-top">
            <div class="robot">
              <img src="../../assets/images/szxz/jiqiren.png" alt class="robot-img" />
              <span>{{info.name}}</span>
            </div>
            <div>{{MyRobot.general_deposit}}：{{info.realpay}}{{MyRobot.dollar}}</div>
          </div>
          <div class="day">
            <div class="day-list">
              <span class="list-name">{{MyRobot.rental_days}}</span>
              <span class="list-name">{{MyRobot.rental_us_dollars}}</span>
            </div>
            <div class="day-list">
              <span class="list-name" style="font-size:35px;">{{info.day}}</span>
              <span class="list-name" style="font-size:35px;">{{info.realpay}}</span>
            </div>
          </div>
          <div class="time">
            <div>{{MyRobot.currency_method}}</div>
            <div>{{MyRobot.purchase_time}}：{{info.createtime}}</div>
          </div>
        </li>
      </ul>
      <button type="button" class="btn-submit btn-origin" v-if="info.status==1" @click="goTo">{{MyRobot.adding_gold}}</button>
      <button type="button" class="btn-submit2 btn-origin" v-if="info.status==1" @click="confirm">{{MyRobot.rent_withdrawal}}</button>
      <m-load ref="load"></m-load>
    </div>
  </div>
</template>
<script>
import { Robot } from "@/server/server.js";
import { Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      info: {},
      id: null,
      MyRobot: {},
      today: {},
    };
  },
  computed: {
    ...mapGetters(["lang"])
  },
  created() {
    // console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    this.MyRobot = this.lang.MyRobot;
    this.today = this.lang.today;
    Robot.showorder({ id: this.id }).then(res => {
      if (res.code == 1) {
        this.info = res.data.data;
      } else {
        mui.toast(res.msg);
      }
    });
  },
  methods: {
    goTo() {
      this.$router.push({ name: "Upgrade", params: { id: this.id } });
    },
    confirm() {
      Robot.canceltips({}).then(res => {
        if (res.code == 1) {
          let btnArr = [this.MyRobot.cancel,this.today.done_]
          mui.confirm(res.data.content,res.data.head,btnArr, actions => {
            if (actions.index == 1) {
              Load.loadStart(this);
              Robot.cancelRobot({ id: this.id }).then(res => {
                if (res.code == 1) {
                  mui.toast(res.data);
                  setTimeout(() => {
                    Load.loadEnd(this);
                    this.$router.go(-1);
                  }, 500);
                } else {
                  Load.loadEnd(this);
                }
              });
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: white;
  .wrap {
    margin: 30px;
    box-shadow: 2px 2px 10px 0px rgba(120, 195, 248, 0.3);
    border-radius: 10px;
    .list {
      padding: 30px;
      .robot-img {
        width: 35px;
        height: 38px;
        margin-right: 10px;
        padding-bottom: 10px;
      }
      .list-top {
        .robot {
          .display-flex();
          align-items: center;
        }
      }
      .day {
        padding: 30px;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
        .day-list {
          .display-flex();
          justify-content: space-around;
          .list-name {
            flex: 1;
            text-align: center;
          }
          &:last-child {
            margin-top: 30px;
          }
        }
      }
      .time {
        margin-top: 8px;
        color: #666;
        font-size: 24px;
      }
    }
  }
  .btn-submit {
    padding: 20px 0;
    margin: 30px auto;
    display: block;
    width: 80%;
    background: rgba(64, 110, 195, 1);
    border-radius: 10px;
    font-size: 32px;
  }
  .btn-submit2 {
    padding: 20px 0;
    margin: 30px auto;
    display: block;
    width: 80%;
    color: #406ec3;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(64, 110, 195, 1);
    font-size: 32px;
  }
}
</style>